<template>
  <vue-content>
    <vue-header>
      <vue-header-form>
        <el-form :inline="true" :model="formFilter" ref="formFilter">
          <el-form-item label="机构编号" prop="institutionNo">
            <el-input v-model.trim="formFilter.institutionNo" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="机构名称" prop="institutionName">
            <el-input v-model.trim="formFilter.institutionName" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="SearchSubmit('formFilter')">查询</el-button>
            <el-button @click="resetForm('formFilter')">重置</el-button>
          </el-form-item>
        </el-form>
      </vue-header-form>
      <vue-header-button>
        <el-button type="primary" @click="create">新增</el-button>
      </vue-header-button>
    </vue-header>
    <vue-body>
      <el-table
        v-loading.body="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="institutionNo"
          fixed
          width="180"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="institutionName"
          width="150"
          label="名称">
        </el-table-column>
        <!--<el-table-column
          prop="institutionDetails"
          label="简介">
        </el-table-column>-->
        <el-table-column
          prop="institutionPhone"
          label="电话" width="130">
        </el-table-column>
        <el-table-column
          label="状态" width="80">
          <template scope="scope">
            {{ scope.row.status | state }}
          </template>
        </el-table-column>
        <el-table-column
          label="logo图片地址" width="180">
          <template scope="scope">
          		<img class="logoImgPic" :src="imgSrc(scope.row.logoPicUrl)"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="institutionColour"
          label="颜色" width="80">
          <template scope="scope">
          		<div :style="styleStr(scope.row.institutionColour)"></div>
          </template>
        </el-table-column>
        <el-table-column
          label="是否允许积分兑换">
          <template scope="scope">
            {{ scope.row.isIntegral | isIntegral }}
          </template>
        </el-table-column>
        <el-table-column
          prop="integralExchange"
          label="1元兑换积分">
        </el-table-column>
        <el-table-column
          label="商品折扣">
          <template scope="scope">
            {{ scope.row.discount}}%
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template scope="scope">
            <el-button-group>
            <el-button
              :disabled="scope.row.status === '01'?true:false"
              size="small"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
             :disabled="scope.row.status === '01'?true:false"
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row, tableData)">删除</el-button>
              <el-button
              v-show = "scope.row.status === '01'"
              size="small"
              type="danger"
              @click="enabled(scope.row.id)">禁用</el-button>
            <el-button
            	v-show = "scope.row.status === '02'"
              size="small"
              @click="abled(scope.row.id)">启用</el-button>
            <!-- <el-button
             :disabled="scope.row.status === '01'?true:false"
              size="small"
              type="info"
              @click="handlePro(scope.$index, scope.row, tableData)">机构商品</el-button> -->
              <el-button
              size="small"
              type="primary"
              @click="handleBanner(scope.$index, scope.row, tableData)">轮播图</el-button>
              <el-button
              size="small"
              type="primary"
              @click="handleDetail(scope.$index, scope.row, tableData)">详情</el-button>
              <!-- <el-button
              size="small"
              type="primary"
              @click="handleClassify(scope.$index, scope.row, tableData)">分类</el-button>
              <el-button
              size="small"
              type="primary"
              @click="handleHomepage(scope.$index, scope.row, tableData)">首页管理</el-button> -->
              </el-button-group>
          </template>
      </el-table-column>
      </el-table>
    </vue-body>
    <vue-footer style="padding: 5px 0;margin: 0 -5px;float:right;">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="pageSize">
      </el-pagination>
    </vue-footer>
    <edit-role
      ref="edit-role"
      @close="editFinish"
      :view="view"
      v-if="view ==='create' || view ==='edit'"/>
    <edit-detail
      ref="edit-detail"
      @close="editFinish"
      :view="view"
      v-if="view ==='detail'"/>
  </vue-content>
</template>

<script>
  import {query, del,forbidden, queryMechanism, use} from '@/services/institution'
  import {RequestError} from '@/services/errors'
  import {deepClone} from '@/utilities/object'
  import EditRole from './edit'
  import EditDetail from './Detail'
  export default {
    name: 'role-table',
    components: {EditRole,EditDetail},
    data: () => ({
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      formFilter: {
        institutionNo: "",
        institutionName: ""
      },
      loading: false,
      view: ''
    }),
    methods: {
      async loadData () {
        this.loading = true
        try {
          let data = await query(Object.assign({currentPage: this.currentPage},{perPage:10}, this.formFilter))
          // debugger
          this.tableData = data.data
					this.pageSize = parseInt(data.totalResult)
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      imgSrc(data){
      	return this.$store.state.imgUrl + data;
      },
      styleStr(data){
      	return "width: 20px;height: 20px;border: 1px solid #aaa;margin-left:10px; border-radius: 5px;background: #"+data+";"
      },
      create () {
        this.view = 'create';
        
        console.log(this.$store.state.imgUrl)
      },
      async handleEdit (index, data) {
        this.view = 'edit'
        await this.$nextTick()
        this.$refs['edit-role'].dialogFormVisible = true
        this.$refs['edit-role'].formData = deepClone(data)
        this.$refs['edit-role'].imgShow = 'edit'
      },
      async handlePro (index, data) {
				this.$router.push({
	        path: 'institution/insProduct', 
	        name: 'insProduct',
	        query: { 
            institutionNo: data.institutionNo
          }
        })
      },
      async handleBanner (index, data) {
				this.$router.push({
	        path: 'institution/insBanner', 
	        name: 'insBanner',
	        query: { 
            institutionNo: data.institutionNo
          }
        })
      },
      handleDelete (index, data, rows) {
        this.$confirm(`此操作将删除${data.institutionName}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
          	let insId = data.id.toString()
            await del(insId)
            this.$message({
              type: 'success',
              message: '已删除'
            })
            rows.splice(index, 1)
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, '提示', {
                type: 'error',
                confirmButtonText: '确定'
              })
            } else {
              throw e
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      async enabled (id) {
        try {
        	let insId = id.toString()
          await forbidden(insId)
          this.$message({
            type: 'success',
            message: '成功'
          })
          this.loadData()
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
      },
      async abled (id) {
        try {
        	let insId = id.toString()
          await use(insId)
          this.$message({
            type: 'success',
            message: '成功'
          })
          this.loadData()
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
      },
      async handleDetail (index, data) {
        this.view = 'detail'
        await this.$nextTick()
        this.$refs['edit-detail'].id = data.id
        this.$refs['edit-detail'].loadData()
      },
      SearchSubmit () {
        this.currentPage = 1
        this.loadData()
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.currentPage = 1
        this.loadData()
      },
      editFinish (needRefresh) {
        this.view = ''
        if(needRefresh){
          this.$nextTick(() => {
            // dom元素更新后执行， 因此此处能正确打印出更改之后的值；
            this.loadData()
         	})
        }
      }
    },
    watch: {
      currentPage (newVal) {
        this.loadData(newVal)
      }
    },
    filters: {
      state (value) {
        return {"01": '启用', "02": '禁用'}[value]
      },
      isIntegral(value){
        return {"0": '不允许', "1": '允许'}[value]
      }
    },
    created () {
      this.loadData();
    }
  }
</script>

<style>
	.logoImgPic{
		height: 100px;
		display: block;
	}
	.el-table th>.cell{
		text-align: center;
	}
</style>
